<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="设备编号">
                    <el-input
                    v-model="queryParams.facilityCode"
                    placeholder="设备编号"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="用户电话">
                    <el-input
                    v-model="queryParams.userPhone"
                    placeholder="用户电话"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                    v-model="queryParams.isSolve"
                    placeholder="状态"
                    clearable
                    size="small"
                    style="width: 240px"
                    >
                    <el-option
                        v-for="statu in statusOptions"
                        :key="statu.value"
                        :label="statu.label"
                        :value="statu.value"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                    v-model="date"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            prop="id"
            label="id"
            align="center">
            </el-table-column>
            <el-table-column
            prop="userId"
            label="用户id"
            align="center">
            </el-table-column>
            <el-table-column
            prop="userPhone"
            label="用户电话"
            align="center">
            </el-table-column>
            <el-table-column
            prop="facilityCode"
            label="设备编号"
            align="center">
            </el-table-column>
            <el-table-column
            prop="faultTypeValue"
            label="报修类型"
            align="center">
            </el-table-column>
            <el-table-column
            prop="faultDetails"
            label="问题描述"
            align="center">
            </el-table-column>
            <el-table-column
            prop="faultDate"
            label="报修日期"
            width="100px"
            align="center">
            </el-table-column>
            <el-table-column
            prop="isSolve"
            label="状态"
            align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isSolve === true">已修复</span>
                    <span v-else>待修复</span>
                </template>
            </el-table-column>
            <el-table-column
            width="100"
            fixed="right"
            label="操作"
            align="center">
                <template slot-scope="scope">
                    <i class="el-icon-edit" style="font-size: 12px;color: #409EFF;cursor:pointer;"  @click="updateRepairOrder(scope.row.id)">编辑</i>
                </template>
            </el-table-column>
            </el-table>
             <!--分页栏-->
            <el-pagination
                    background
                    align="center"
                    @size-change="handleSizeChange($event,111)"
                    @current-change="data()"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--处理状态-->
        <el-dialog
        title="编辑报修工单状态"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="状态:">
                <el-radio v-model="form.solve" :label="true">已修复</el-radio>
                <el-radio v-if="form.solve != true" v-model="form.solve" :label="false">待修复</el-radio>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submmit()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import { list,add,del,update,deviceRepair,inquire } from '@/api/app_pages/deviceRepair'
export default {
    components:{
    },
    data(){
        return {
            size: 20,
            currentPage: 1,
            total: 0,
            tableData: [
                {
                    date: new Date(),
                }
            ],
            dialogVisible: false,
            form: {},
            queryParams:{},
            statusOptions:[
                {
                    label: '待修复',
                    value: false,
                },
                {
                    label: '已修复',
                    value: true,
                }],
                date:[]
        }
    },
    created(){
        this.data()
    },
    methods:{
        data(){
            list(this.size,this.currentPage).then(res => {
                this.tableData = res.rows
                this.total = parseInt(res.total)
            }) 
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.minFaultDate = this.date[0]
            this.queryParams.maxFaultDate = this.date[1]
            this.queryParams.pageSize = this.pageSize
            this.queryParams.pageNum = this.pageNum
            inquire(this.queryParams).then(res =>{
                this.tableData = res.rows
                this.total = parseInt(res.total)
            })
        },
        /** 更新报修订单 */
        updateRepairOrder(id){
        this.dialogVisible = true
        this.form.id = parseInt(id);  
        deviceRepair(this.form.id).then(res => {
            this.form = res.data 
          })
        },
        /** 关闭添加框 */
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        resetQuery(){
            this.queryParams = {}   
            this.date = []
        },
        submmit(){
            this.form.isSolve = this.form.solve
            this.$delete(this.form,'solve')
            this.$delete(this.form,'facilityCode')
            this.$delete(this.form,'userPhone')
            this.$delete(this.form,'faultTypeCode')
            this.$delete(this.form,'faultDetails')
            this.$delete(this.form,'faultDate')
            this.$delete(this.form,'params')
            new Promise((resolve,reject) =>{
              update(this.form).then(res => {
                this.dialogVisible = false
                resolve()
              })
            }).then(res => {
              this.data()
            })
        },
        handleSizeChange(val,e) {
            this.size = val
            this.data()
        },
    }
}
</script>
<style>
    .text {
    font-size: 14px;
    }
    .item {
    margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
    display: table;
    content: "";
    }
    .clearfix:after {
    clear: both
    }
    .box-card {
    margin: 0 auto;
    }
</style>